Перейти к основному содержимому

Брендирование

В VALO Cloud существует возможность кастомизировать внешний вид системы. Это позволяет настраивать внешний вид интерфейса под стилистику вашей компании. Настройка внешнего вида системы производится с помощью создания кастомных тем оформления в разделе «Настройки» на вкладке «Брендирование» (подробнее см. п. Темы компании).

Вы можете создать и назначить темой по умолчанию собственную тему в стилистике компании, но также можете пользоваться предустановленными темами (подробнее см. п. Общие темы). Обратите внимание, что тема, назначенная темой по умолчанию, будет влиять на внешний вид системы для новых пользователей системы, а также внешних пользователей, работающих с системой с помощью публичных ссылок.

Если пользователю (как сотруднику, так и пользователю контрагента) будет назначена роль, позволяющая управлять своим профилем, то пользователь сможет поменять тему в настройках аккаунта. В случае с пользователями контрагентов этот функционал можно использовать для создания специальной темы под стилистику компании контрагента: вы можете создать тему в соответствие с брендбуком компании контрагента, а затем пользователь сможет назначить себе эту тему и работать в системе, оформленной в стилистике его компании.

Общие темы​

По умолчанию в VALO Cloud созданы две темы оформления: темная и светлая. Светлая тема изначально выбрана темой по умолчанию: интерфейс системы будет отображаться в этой теме для всех пользователей, приглашенных в систему. Пользователи с набором полномочий, позволяющих им редактировать свой профиль, могут в последствие назначить одну из этих тем как тему отображения интерфейса системы для своего профиля (кнопка профиля в правом углу верхней панели → «Настройки аккаунта» → поле «Тема»).

Вы можете назначить одну из общих тем темой по умолчанию: нажмите кнопку рядом с нужной темой и воспользуйтесь командой «Сделать по умолчанию». Тема, установленная в текущий момент как тема по умолчанию, отмечена зеленой галочкой.

Общие темы нельзя отредактировать, скрыть или удалить, поэтому они также отмечены знаком . Однако вы можете открыть общие темы для просмотра, чтобы ознакомиться с внешним видом системы при данной теме. Для этого кликните на тему или нажмите кнопку рядом с нужной темой и воспользуйтесь командой «Просмотр». Тема откроется в редакторе, но только в режиме просмотра.

Также вы можете дублировать общую тему, чтобы создать на ее основе свою: нажмите кнопку рядом с нужной темой и воспользуйтесь командой «Дублировать».

Темы компании​

Темы компании – это темы, которые созданы администраторами системы или пользователями с соответствующим набором полномочий. Вы можете создавать свои темы, настраивая их в соответствие с брендбуком вашей компании.

Создание и редактирование темы​

Новые темы создаются на основе уже существующих в системе. Создать новую тему можно одним из следующих способов:

  • На вкладке «Брендирование» нажмите кнопку «Создать» на верхней панели. В открывшемся окне задайте имя новой темы и выберите, на основе какой из существующих в системе тем будет создана новая тема в выпадающем списке «Выбрать тему». Нажмите «Создать».
  • Нажмите кнопку рядом с одной из существующих в системе тем и воспользуйтесь командой «Дублировать». В открывшемся окне задайте имя новой темы и нажмите «Создать».

После создания новая тема будет открыта в редакторе (подробнее см. п. Редактор темы).

Также вы можете открыть в редакторе уже созданную тему из раздела «Темы компании». Для этого кликните на тему или нажмите кнопку рядом с нужной темой и воспользуйтесь командой «Редактировать».

Скрытие темы​

Если среди созданных тем компании есть те, которые необходимо скрыть от пользователей (например, если тема еще не до конца настроена), нажмите кнопку рядом с нужной темой и воспользуйтесь командой «Скрыть». Скрытые темы будут отображаться серыми на вкладке «Брендирование», также их нельзя назначить темами по умолчанию. Пользователи, которые имеют роль, позволяющую редактировать свой профиль, не увидят эту тему в настройках своего профиля в выпадающем списке «Тема». Однако, вы можете редактировать, дублировать и создавать новые темы на основе скрытых тем. Скрытые темы можно вернуть обратно в перечень не скрытых: нажмите кнопку рядом с нужной темой и воспользуйтесь командой «Показать».

Назначение темы по умолчанию​

Вы можете назначать темой по умолчанию любую не скрытую тему из перечня тем компании: нажмите кнопку рядом с нужной темой и воспользуйтесь командой «Сделать по умолчанию». Тема, установленная в текущий момент как тема по умолчанию, отмечена зеленой галочкой.

Удаление темы​

В отличие от общих тем, темы компании можно при необходимости удалять: нажмите кнопку рядом с нужной темой и воспользуйтесь командой «Удалить». Удаленные темы нельзя восстановить.

Редактор темы​

Редактор темы позволяет настроить внешний вид системы в рамках одной темы. В окне редактора вам доступен следующий функционал:

  1. Поле с именем темы. Вы можете изменить его: нажмите кнопку и измените имя темы.
  2. Выпадающий список, позволяющий переключиться между настройкой внешнего вида системы для зарегистрированных пользователей системы («Главная») и настройкой внешнего вида системы для внешних пользователей, получающих доступ к системе через публичную ссылку («Публичная ссылка»).
  3. Кнопки переключения между базовым и продвинутым режимом редактора темы. В базовом режиме вы можете изменять цвет или фоновое изображение рабочего окна системы, цвета активных кнопок и иконок, цвета и шрифты текстов интерфейса, а также логотип. В продвинутом режиме доступны более гибкие настройки: вы можете изменять фоны для отдельных частей окна рабочей системы (например, установить разный цвет фона для правой и левой панелей), настраивать внешний вид внутренних окон, а также цвета отображения файлов разного типа и папок.
  4. Основное окно редактора темы: макет окна системы, в котором вы можете вызывать редактор элементов системы по клику на них. Элементы, которые вы можете настраивать в выбранном режиме, отмечены на макете специальными маркерами . При наведении курсора на элемент будут подсвечены взаимосвязанные элементы, которые будут отредактированы вместе с выбранным элементом.
  5. Кнопка сохранения изменений темы.
  6. Кнопка выхода из редактора. Обратите внимание, что, если вы выйдете из редактора не нажав кнопку «Сохранить», то изменения, которые вы внесли в тему, не сохранятся.

Редактирование темы позволяет:

  • Изменять цвет фона, надписей, кнопок и иконок с помощью инструмента настройки цвета.

  • Изменять шрифт текстов интерфейса с помощью выбора из списка доступных шрифтов.

  • Загружать собственное фоновое изображение или логотип с помощью инструмента загрузки изображений с устройства.

Инструменты настройки открываются по клику на элемент макета, соответствующему элементу интерфейса системы. В зависимости от режима вам доступна настройка разного перечня элементов интерфейса. Чтобы понять, какие элементы интерфейса входят в открытую вами настройку, наведите на этот элемент курсор мыши. Все элементы, которые будут изменены этой настройкой, будут подсвечены на макете.

После изменения настроек элемента нажмите «Применить» в окне настройки (Рис. 18).

Базовый режим редактора​

Настройки, доступные в режиме редактирования «Базовый»:

  • «Фон» и «Фоновое изображение» – изменение цвета фона всего рабочего окна системы и загрузка фонового изображения.
  • «Акцентный» – изменение акцентного цвета, которым будут выделены активные элементы: доступные для действий кнопки, активный каталог, активные иконки и т. д.
  • «Текст кнопок» – изменение цвета текста, расположенного на кнопках.
  • «Текст» – изменение цвета текстов элементов интерфейса, которые не находятся в фокусе.
  • «Шрифт» – выбор одного из доступных шрифтов отображения текстов интерфейса.
  • «Иконка» – изменение цвета отображения иконок в интерфейсе (кроме иконок в фокусе и иконок файлов и папок).
  • «Логотип на панели разделов» – загрузка изображения, которое будет отображаться на боковой панели как логотип.
  • «Значок сайта» – загрузка изображения, которое будет отображаться в заголовке вкладки браузера, в которой открыта система.
  • «Логотип для публичной ссылки» (только на вкладке настройки публичной ссылки) – загрузка изображения, которое будет отображаться как логотип в левом верхнем углу экрана работы с публичной ссылкой.

Продвинутый режим редактора​

В режиме редактирования «Продвинутый» настройки макета разделены на зоны рабочего окна (за исключением акцентного цвета – он задается единым для всех зон):

  1. «Левая» – настройка элементов левой панели. Доступны следующие настройки: фон или фоновое изображение, цвет разделительной линии (между левой панелью и центральной частью окна), цвет и шрифт текста (названия каталогов, разделов администрирования и имя компании), логотип и значок сайта.
  2. «Верхняя» – настройка элементов верхней панели. Доступны следующие настройки: фон или фоновое изображение, цвет разделительной линии (между верхней панелью и центральной частью окна), цвет и шрифт текста, цвет иконки поиска, цвет кнопки верхней панели, в том числе цвет кнопки при наведении на нее курсора, цвет текста кнопки. Обратите внимание, что настройка иконки профиля, находящейся на верхней панели, осуществляется при настройке иконок центральной части окна.
  3. «Центр» – настройка элементов центральной части окна. Доступны следующие настройки: фон или фоновое изображение, цвет разделительных линий внутри центральной части окна, цвет и шрифт текста, цвет иконок, в том числе цвет иконок папок и файлов (есть возможность настроить цвета для иконок отображения каждого типа файлов), цвет фона для файлов и папок в режиме просмотра миниатюр.
  4. «Правая» – настройка элементов правой панели. Доступны следующие настройки: фон или фоновое изображение, цвет разделительных линий (между правой панелью и центральной частью окна, а также внутри панели), цвет и шрифт текста, цвет иконок в верхней части правой панели.
  5. «Попап» – настройка элементов внутренних мини–окон, например, окно настройки публичной ссылки. Доступны следующие настройки: фон или фоновое изображение, цвет контура окна, цвет разделительных линий внутри окна, цвет и шрифт текста (цвет текста в данном случае влияет и на цвет кнопки внутри окна), цвет текста кнопки внутри окна, цвет иконок.

Редактирование раздела «Публичная ссылка» в продвинутом режиме аналогичным образом разделено на зоны рабочего окна.

Изменение настроек брендирования​

Изменение заголовка окна​

Для изменения заголовка окна приложения Valo Cloud необходимо в БД в таблице public.settings указать нужное значение параметра brand_name.

Изменение логотипа приложения​

Для изменения логотипа приложения Valo Cloud необходимо:

  1. В редакторе загрузить в новую тему изображение.
  2. Сохранить новую тему.
  3. Выбрать эту тему в качестве используемой по умолчанию одним из следующих способов:

  • С помощью пользовательского интерфейса Valo Cloud:

    • Установить флажок Сделать по умолчанию для темы Custom.

  • Используя WildFly:

    • В настройках WildFly найти указание на использование дефолтной темы: /opt/wildfly/themes/public/default.
    • Изменить значение на следующее: /opt/wildfly/themes/custom_schema_id.
  1. Выйти из приложения.
  2. Почисть кэш браузера.
  3. Выполнить авторизацию в приложении.